<template>
	<el-aside width="60px" class="sidebar">
		<div class="avatar-container">
			<el-avatar class="avatar" :src="avatar">
				<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="avatar" />
			</el-avatar>
		</div>
		<el-menu class="el-menu-vertical-demo" background-color="transparent" text-color="#fff" active-text-color="#409eff"
			collapse-transition unique-openedß default-active="1" @select="handleSelect">
			<el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index"
				:class="{ 'is-active': activeIndex === item.index }">
				<el-icon :class="{ filled: activeIndex === item.index }">
					<component :is="item.icon" />
				</el-icon>
			</el-menu-item>
		</el-menu>

		<div class="settings" @click="handleSelect('settings')">
			<el-icon :class="{ filled: activeIndex === 'settings' }">
				<Setting />
			</el-icon>
		</div>
	</el-aside>
</template>

<script>
import {
	defineComponent,
	onMounted,
	ref
} from 'vue';
import {
	User,
	ChatDotRound,
	Setting,
} from '@element-plus/icons-vue';
import api from '../api';

// 从后端获取用户头像

export default defineComponent({
	components: {
		User,
		ChatDotRound,
		Setting,
	},
	setup() {
		const activeIndex = ref('1');
		const menuItems = [{
			index: '1',
			icon: ChatDotRound
		},
		{
			index: '2',
			icon: User
		},
		];
		const handleSelect = (key) => {
			activeIndex.value = key;
		};

		const avatar = ref('');

		onMounted(async () => {
			// const res = await api.getAvatar();
			// avatar.value = res.data.avatar;
			// console.log(res.data.avatar);
		});
		return {
			activeIndex,
			menuItems,
			handleSelect,
			avatar,
		};


	},
});
</script>

<style scoped>
.sidebar {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: rgba(255, 255, 255, .1);
	backdrop-filter: blur(10px);
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
}

.el-menu-vertical-demo {
	border-right: none;
	flex-grow: 1;
}

.avatar-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
	margin-top: 20px;
}

.avatar {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
}

.el-menu-item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	background-color: transparent;
	transition: background-color 0.3s;
	opacity: 0.8;
}

.el-menu-item:hover {
	background-color: rgba(0, 0, 0, .1);
	opacity: 1;
}

.menu-item.is-active {
	background-color: rgba(255, 255, 255, .1);
	opacity: 0.8;
}

.el-icon {
	font-size: 24px;
	color: #909399;
	transition: color 0.3s;
}

.el-icon.filled {
	color: #409eff;
}

.settings {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	cursor: pointer;
	background-color: transparent;
	transition: background-color 0.3s;
	opacity: 0.8;
	border-bottom-left-radius: 1rem;
}

.settings:hover {
	background-color: rgba(0, 0, 0, .1);
	opacity: 1;
}

.settings.is-active {
	background-color: rgba(255, 255, 255, .1);
	opacity: 0.8;
}
</style>